<template>
  <div class="grade-edit">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <h1>{{ gradeType }}批改</h1>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <h2>{{ project.name }}</h2>
        <p>{{ project.description }}</p>
        <p>项目附件: <a :href="project.attachment" target="_blank">查看附件</a></p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22" :offset="0.5">
        <el-form :model="group">
          <el-form-item label="小组成绩">
            <el-input-number v-model="group[gradeTypeToProp(gradeType)]"  @change="updateMemberGrades"></el-input-number>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form :model="group">
          <el-form-item label="小组评语">
            <el-input v-model="group.comments" style="width: 400px;"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22" :offset="0.5">
        <el-table :data="group.children" style="width: 100%">
          <el-table-column prop="position" label="身份"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column :label="gradeType">
            <template #default="scope">
              <el-input-number v-model="scope.row[gradeTypeToProp(gradeType)]"  @change="updateGroupGrade(scope.row)"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="评语" >
            <template #default="scope">
              <el-input v-model="scope.row.comments" />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button @click="goBack">返回</el-button>
        <el-button type="primary" @click="updateScore">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const gradeType = ref(route.query.gradeType)
const group = ref(JSON.parse(route.query.row))

const project = ref({
  name: '示例项目',
  description: '这是一个示例项目的描述。',
  attachment: 'https://example.com/attachment.pdf'
})

const gradeTypeToProp = (type) => {
  switch (type) {
    case '初期成绩':
      return 'initialScore'
    case '中期成绩':
      return 'midTermScore'
    case '终期成绩':
      return 'finalScore'
    default:
      return ''
  }
}

const goBack = () => {
  router.back()
}

const updateScore = async () => {
  try {
    const payload = {
      ...group.value,
    }
    const response = await axios.post('http://localhost:8080/rating/update', payload)
    if (response.data === 0) {
      ElMessage({
        message: '保存成绩成功',
        type: 'success',
      })
      router.push({ name: "grading" })
    } else if (response.data === 4) {
      ElMessage({
        message: '评语长度过长',
        type: 'warning',
      })
    } else {
      ElMessage({
        message: '保存成绩失败，成绩超出范围',
        type: 'error',
      })
    }
  } catch (error) {
    ElMessage({
      message: '保存成绩失败',
      type: 'error',
    })
    console.error('保存成绩失败', error)
  }
}

const updateMemberGrades = () => {
  const prop = gradeTypeToProp(gradeType.value)
  group.value.children.forEach(member => {
    member[prop] = group.value[prop]
  })
}

const updateGroupGrade = (row) => {
  const prop = gradeTypeToProp(gradeType.value)
  const member = group.value.children.find(member => member.id === row.id)
  if (member) {
    member[prop] = row[prop]
  }
}
</script>

<style scoped>
.grade-edit {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

h2 {
  text-align: left;
  margin: 0;
  font-size: 1.5em;
  color: #333;
}

p {
  text-align: left;
  max-height: 60px;
  margin: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
